<template>
	<div class="search-list" v-show="searches.length">
		<transition-group name="list" tag="ul">
			<li v-for="item in searches" :key="item" class="search-item" @click="select(item)">
				<span class="text">{{item}}</span>
				<span class="icon">
					<i class="icon-delete" @click.stop="deleteOne(item)"></i>
				</span>
			</li>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name: 'SearchList',
		props: {
			searches: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			select(item) {
				this.$emit('select', item);
			},
			deleteOne(item) {
				this.$emit('delete', item);
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '../../common/stylus/variable'
	
	.search-list
		.search-item
			display: flex
			align-items: center	
			height: 40px
			overflow: hidden
			&.list-enter-active, &.list-leave-active
				transition: all 0.1s
			&.list-enter, &.list-leave-to
				height: 0
			.text
				flex: 1
				color: $color-text-l
			.icon
				extend-click()
				.icon-delete
					font-size: $font-size-small
					color: $color-text-d	
</style>